<template>
  <div class="module-box single-img">
    <div class="single-img__box">
      <el-upload
        drag
        :action="fileUploadURL"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :show-file-list="false"
        :headers="headers"
      >
        <img v-if="imageUrl" :src="imageUrl" class="single-img__img" />
        <i v-else class="el-icon-upload">
          <div class="el-upload__text"><em>选择图片</em></div>
          <div class="el-upload__tip" slot="tip">{{ tip.label }}</div>
        </i>
      </el-upload>
      <div class="overlay" v-if="imageUrl">
        <i class="iconfont icon-chakan" @click="showImage"></i>
        <i class="iconfont icon-shanchu1" @click="delImage"></i>
      </div>
    </div>
    <el-dialog title="图片展示" :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  name: "tool-single-img",
  data() {
    return {
      headers: {
        Authorization: `Bearer ${getToken()}`
      },
      dialogVisible: false,
      dialogImageUrl: "",
      fileUploadURL: ""
    };
  },
  props: {
    imageUrl: {
      type: String,
      default: ""
    },
    tip: {
      type: Object,
      default: () => ({})
    }
  },
  mounted() {
    this.fileUploadURL =
      process.env.VUE_APP_BASE_API + "api/upload?type=goldenPic";
  },
  methods: {
    handleAvatarSuccess(res, file) {
      console.log('1111', res, file)
      this.$emit("update:imageUrl", res.link);
    },
    beforeAvatarUpload(file) {
      // const isLt1M = file.size / 1024 / 1024 < 1
      // if (!isLt1M) {
      //   this.$message.error('上传图片大小不能超过 1MB!')
      // }
      // return isLt1M
      console.log('上传地址', file);

      // 修改请求的 headers
      const formData = new FormData();
      formData.append("file", file);
      console.log(formData)
      // 返回一个 Promise 以异步控制上传
      // return new Promise((resolve, reject) => {
      //   const xhr = new XMLHttpRequest();
      //   console.log('xhr', xhr)
      //   xhr.open("POST", this.fileUploadURL, true);
      //   xhr.setRequestHeader("Authorization", `Bearer ${this.token}`);
      //   xhr.onreadystatechange = () => {
      //     if (xhr.readyState === 4 && (xhr.status === 201 || xhr.status === 200)) {
      //       console.log('上传成功')
      //       resolve();
      //     } else if (xhr.readyState === 4) {
      //       console.log('失败')
      //       reject("上传失败");
      //     }
      //   };
      //   xhr.send(formData);
      // });
    },
    showImage() {
      this.dialogImageUrl = this.imageUrl;
      this.dialogVisible = true;
    },
    delImage() {
      this.$emit("update:imageUrl", "");
    }
  }
};
</script>

<style lang="scss" scoped>
.single-img {
  &__box {
    position: relative;
    >>> .el-upload {
      width: 100%;
    }
    >>> .el-upload-dragger {
      width: 100%;
      .el-upload__text {
        line-height: 40px;
      }
      .el-upload__tip {
        line-height: 1em;
      }
    }
    .overlay {
      display: none;
    }
    &:hover .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont {
        padding: 5px;
        margin: 0 5px;
        font-size: 20px;
        cursor: pointer;
      }
    }
  }
  &__img {
    position: absolute;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
</style>
